<template>
  <div class="main">
    <div class="center">
      <div class="navbar">
        <Header></Header>
        <!-- 虞都私有化部署套餐 -->
        <div class="sysTs">
          <div class="systitle">系统管理</div>
          <!-- start -->
          <div class="box">
            <!-- 1 -->
            <div class="one">
              <div class="one_img">
                <img
                  style="width: 40px; height: 40px"
                  src="../../../assets/ConsignmentFourzero/system/detail/yonghu.png"
                  alt=""
                />
              </div>
              <div class="one_txt">用户</div>
            </div>
            <!-- 2 -->
            <div class="one">
              <div class="one_img">
                <img
                  style="width: 40px; height: 40px"
                  src="../../../assets/ConsignmentFourzero/system/detail/juese.png"
                  alt=""
                />
              </div>
              <div class="one_txt">角色</div>
            </div>
            <!-- 3 -->
            <div class="one">
              <div class="one_img">
                <img
                  style="width: 40px; height: 40px"
                  src="../../../assets/ConsignmentFourzero/system/detail/bumen.png"
                  alt=""
                />
              </div>
              <div class="one_txt">部门</div>
            </div>
          </div>
          <!-- end -->
          <div class="left">
            <div class="left_one">
              <div class="one">01.</div>
              <div class="two">用户管理：用户权限授权</div>
            </div>
            <div class="left_one">
              <div class="one">02.</div>
              <div class="two">角色权限：授权数据操作权限</div>
            </div>
            <div class="left_one">
              <div class="one">03.</div>
              <div class="two">部门管理：组织架构管理</div>
            </div>
          </div>
        </div>
        <!-- 店铺管理 -->
        <div class="sysDP">
          <div class="systitle">店铺管理</div>
          <div class="sys_one">
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/qqqz.png"
                  alt=""
                />
              </div>
              <div class="titlename">QQ群组</div>
              <div class="txtName">
                <div class="txt">设置自己官网的交易流群</div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/ggwzgl.png"
                  alt=""
                />
              </div>
              <div class="titlename">公告文章管理</div>
              <div class="txtName">
                <div class="txt">设置官网的公告以及展示内容</div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/dpzx.png"
                  alt=""
                />
              </div>
              <div class="titlename">店铺中心</div>
              <div class="txtName">
                <div class="txt">设置域名，以及网站名字和LOGO</div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/kfgl.png"
                  alt=""
                />
              </div>
              <div class="titlename">客服管理</div>
              <div class="txtName">
                <div class="txt">用于设置自己官网的回收客</div>
                <div class="txt">服以及销售客服</div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/tsjy.png"
                  alt=""
                />
              </div>
              <div class="titlename">投诉建议</div>
              <div class="txtName">
                <div class="txt">客户反馈问题的入口</div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/dpxs.png"
                  alt=""
                />
              </div>
              <div class="titlename">店铺装修</div>
              <div class="txtName">
                <div class="txt">设置自己官网的轮番图以及各个</div>
                <div class="txt">功能的按钮，全自定义化官网</div>
              </div>
            </div>
            <!-- one end -->
          </div>
        </div>
        <!-- 商品管理 -->
        <div class="sysshop">
          <div class="systitle">商品管理</div>
          <div class="left">
            <div class="left_one">
              <div class="one">01.</div>
              <div class="three">商品管理</div>
              <div class="two">用于管理自己的游戏账号</div>
              <div class="icon"></div>
            </div>
            <div class="left_one">
              <div class="one">02.</div>
              <div class="three">商品审核</div>
              <div class="two">用于审核员工上传的账号和客户上传的商品</div>
            </div>
          </div>
        </div>
        <!-- 订单管理 -->
        <div class="sysPaY">
          <div class="systitle">订单管理</div>
          <div class="sys_one">
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/xiaoshouorder.png"
                  alt=""
                />
              </div>
              <div class="titlename">销售订单</div>
              <div class="txtName">
                <div class="txt">用于记录自己的销售订单</div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/bainshen.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/shouhouorder.png"
                  alt=""
                />
              </div>
              <div class="titlename">售后订单</div>
              <div class="txtName">
                <div class="txt">用于审核员工上传的账</div>
                <div class="txt">号以及客户上传的商品</div>
              </div>
            </div>
            <!-- one end -->
          </div>
        </div>
        <!-- 财务管理 -->
        <div class="sysmoney">
          <div class="systitle">财务管理</div>
          <div class="sys_one">
            <!-- one -->
            <div class="box1">
              <div class="name">01.</div>
              <div class="titlename">销售统计</div>
              <div class="txtName">
                <div class="txt">
                  用于订单统计，系统自动分析出了利润以及销售额等重要数据
                </div>
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div>
                <img
                  class="img"
                  src="../../../assets/ConsignmentFourzero/system/detail/moneyTotal.png"
                  alt=""
                />
              </div>
            </div>
            <!-- one end -->
            <!-- one -->
            <div class="box1">
              <div class="name">02.</div>
              <div class="titlename">售后统计</div>
              <div class="txtName">
                <div class="txt">用于记录自己的售后订单，系统并做出财务自动化数据分析</div>
              </div>
            </div>
            <!-- one end -->
          </div>
        </div>
        <!-- 接口管理 -->
        <div class="sysAPI">
          <div class="systitle">接口管理</div>
          <div class="all">
            <div class="left">
              <div class="left_one">
                <div class="one">01.</div>
                <div class="three">接口管理</div>
                <div class="two">用于API接口对接，建立自己的API销售渠道</div>
                <div class="icon"></div>
              </div>
              <div class="left_one">
                <div class="one">02.</div>
                <div class="three">推送记录</div>
                <div class="two">用于监控实时同步数据</div>
              </div>
            </div>
            <div class="right">
              <img
                style="width: 360px; height: 360px"
                src="../../../assets/ConsignmentFourzero/system/detail/jiekouguanli.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- 辅助功能 -->
        <div class="fuzhu">
          <div class="systitle">辅助功能</div>
          <div class="fuzhu_all">
            <!-- one -->
            <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhuone.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhutwo.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhuthree.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhufour.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhufive.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhusix.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhuseven.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhueight.png"
                alt=""
              />
            </div>
             <!-- one -->
             <div class="fuzhu_one">
              <img
                class="fuzhu_Img"
                src="../../../assets/ConsignmentFourzero/system/fuzhunine.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
       <!-- 底部 -->
       <Footer></Footer>
    </div>
  </div>
</template>
  
  <script>
import Header from '../../../components/ConsignmentFourzero/header.vue'
import Footer from '../../../components/ConsignmentFourzero/footer.vue'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {
  }
}
  </script>
  
  <style lang="scss" scoped>
.main {
  width: 100%;
  background-color: #000;
}
.center {
  .navbar {
    width: 1200px;
    margin: 0 auto;

    .sysTs {
      background-color: #fff;
      height: 447px;
      background-image: url("../../../assets/ConsignmentFourzero/system/detail/xitongBg.png");
      background-repeat: no-repeat;
      background-size: 100% 447px;
      .systitle {
        padding-top: 26px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .box {
        justify-content: center;
        display: flex;
        margin: 15px 0;
        .one {
          text-align: center;
          margin-right: 26px;
          .one_txt {
            font-weight: 500;
            font-size: 18px;
            color: #333333;
          }
        }

        .one:nth-child(3) {
          margin-right: 0;
        }
      }

      .left {
        width: 234px;
        margin-left: 272px;
        margin-top: 33px;
        .left_one {
          margin-bottom: 20px;
          .one {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
          }
          .two {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
          }
        }
      }
    }

    .sysDP {
      background-color: #f4f7ff;
      height: 447px;
      padding: 0 195px;
      .systitle {
        padding-top: 16px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .sys_one {
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .box1 {
          width: 242px;
          height: 172px;
          border-radius: 10px;
          padding: 20px;
          text-align: center;
          margin-right: 39px;
          margin-bottom: 16px;
          cursor: pointer;
          transition: All 0.4s ease-in-out;
          -webkit-transition: All 0.4s ease-in-out;
          -moz-transition: All 0.4s ease-in-out;
          -o-transition: All 0.4s ease-in-out;
          .img {
            width: 72px;
            height: 72px;
          }
          .titlename {
            height: 18px;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
            line-height: 30px;
            font-style: normal;
          }
          .onetype {
            width: 72px;
            height: 30px;
            background: linear-gradient(
              135deg,
              #32c5ff 0%,
              #b620e0 100%
            ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
            -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent; /*给文字设置成透明*/
            font-size: 18px;
            color: #fff;
            margin: 0 auto;
          }
          .txtName {
            padding-top: 10px;
            height: 60px;
            margin-bottom: 33px;
            .txt {
              height: 20px;
              font-weight: 300;
              font-family: STHeitiSC, STHeitiSC;
              font-size: 14px;
              color: #666666;
              line-height: 20px;
              text-align: center;
              font-style: normal;
            }
          }
        }

        .box1:hover {
          transform: scale(1.2);
          -webkit-transform: scale(1.2);
          -moz-transform: scale(1.2);
          -o-transform: scale(1.2);
          -ms-transform: scale(1.2);
        }

        .box1:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    .sysshop {
      background-color: #fff;
      height: 447px;
      background-image: url("../../../assets/ConsignmentFourzero/system/detail/shopBg.png");
      background-repeat: no-repeat;
      background-size: 100% 447px;
      .systitle {
        padding-top: 26px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .left {
        width: 342px;
        margin-left: 272px;
        margin-top: 56px;
        .left_one {
          margin-bottom: 20px;
          .one {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
          }
          .two {
            padding-top: 5px;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
          }

          .three {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
          }

          .icon {
            margin-top: 10px;
            width: 56px;
            height: 4px;
            background-color: #5d87ff;
            opacity: 0.6;
          }
        }
      }
    }

    .sysPaY {
      background-color: #f4f7ff;
      height: 447px;
      padding: 0 330px;
      .systitle {
        padding-top: 26px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .sys_one {
        padding-top: 56px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .box1 {
          // width: 198px;
          height: 172px;
          border-radius: 10px;
          // padding: 20px;
          text-align: center;
          // margin-right: 35px;
          margin-bottom: 16px;
          cursor: pointer;
          .img {
            width: 140px;
            height: 140px;
          }
          .titlename {
            height: 24px;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
            line-height: 30px;
            font-style: normal;
            padding-top: 6px;
          }
          .txtName {
            padding-top: 20px;
            height: 60px;
            margin-bottom: 33px;
            .txt {
              height: 24px;
              font-weight: 500;
              font-family: STHeitiSC, STHeitiSC;
              font-size: 17px;
              color: #333;
              line-height: 24px;
              text-align: center;
              font-style: normal;
            }
          }
        }
        .box1:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    .sysmoney {
      background-color: #fff;
      height: 447px;
      padding: 0 130px;
      .systitle {
        padding-top: 26px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .sys_one {
        padding-top: 86px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .box1 {
          width: 254px;
          height: 172px;
          border-radius: 10px;
          text-align: center;
          margin-bottom: 16px;
          cursor: pointer;
          .name {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
          }
          .img {
            width: 281px;
            height: 177px;
          }
          .titlename {
            height: 24px;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
            line-height: 30px;
            font-style: normal;
            padding-top: 6px;
          }
          .txtName {
            padding-top: 20px;
            height: 60px;
            margin-bottom: 33px;
            .txt {
              height: 24px;
              font-weight: 500;
              font-family: STHeitiSC, STHeitiSC;
              font-size: 18px;
              color: #333;
              line-height: 24px;
              text-align: center;
              font-style: normal;
            }
          }
        }
        .box1:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    // 接口管理
    .sysAPI {
      background-color: #f4f7ff;
      height: 447px;
      .systitle {
        padding-top: 26px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .all {
        display: flex;
        justify-content: space-evenly;
      }

      .left {
        width: 350px;
        margin-left: 126px;
        margin-top: 56px;
        .left_one {
          margin-bottom: 20px;
          .one {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
          }
          .two {
            padding-top: 5px;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
          }

          .three {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 800;
            font-size: 24px;
            color: #5d87ff;
          }

          .icon {
            margin-top: 10px;
            width: 56px;
            height: 4px;
            background-color: #5d87ff;
            opacity: 0.6;
          }
        }
      }
    }

    //辅助功能
    .fuzhu {
      background-color: #fff;
      height: 606px;
      padding: 0 24px;
      .systitle {
        padding-top: 26px;
        width: 128px;
        background: linear-gradient(
          135deg,
          #b620e0 0%,
          #32c5ff 100%
        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        margin: 0 auto;
      }

      .fuzhu_all {
        padding-top: 32px;
        display: flex;
        flex-wrap: wrap;
        .fuzhu_one {
          width: 209px;
          height: 227px;
          margin: 0 26px 26px 0;
          .fuzhu_Img {
            width: 100%;
            height: 100%;
          }
        }

        .fuzhu_one:nth-child(1){
           margin-left: 118px;
        }

        .fuzhu_one:last-child{
          margin: 0;
        }
      }
    }
  }
}
</style>